<template>
  <view v-if="couponList.length" class="couponContainer">
    <view v-if="type === 'goods'" class="title">可领取的优惠券</view>
    <view v-if="type === 'order'" class="title">可使用优惠券</view>
    <view class="coupnItemScroll" :style="{'max-height': type !== 'mine' ? '360px' : 'auto'}">
      <view class="coupnItemBox">
        <view v-for="(item, index) in couponList" :key="index" class="couponNone">
          <view class="couponItem" :class="{'couponSelected': couponState !== 0 || !(!item.received || (item.repeat_receive !== 1 && item.received < item.repeat_quantity) || item.repeat_quantity === 0)}">
            <view class="quota">
              <view class="b"><view class="small">¥</view>{{ item.price }}</view>
              <view class="span">{{ item.standard_price ? `满${item.standard_price}可用` : '无门槛' }}</view>
            </view>
            <view class="descripe">
              <view class="p">{{ item.name }}</view>
              <view v-if="item.use_time_type === 'BY_DAYS' && item.use_days" class="span">
                有效期: 领取后{{ item.use_days }}天内有效
              </view>
              <view v-else class="span">{{ item.use_start_time * 1000 | parseTime('{y}-{m}-{d}') }} - {{ item.use_stop_time * 1000 | parseTime('{y}-{m}-{d}') }}</view>
              <view v-if="type === 'mine' && item.rule" class="em" @click="showRule(item)"><view class="span">{{ item.rule ? '使用说明 ' : ` ` }}</view> <view class="span"> <image v-if="item.rule" :src="'/static/images/icon/icon_wh.png'" style="width:20rpx;height:20rpx" />  </view></view>
            </view>
            <view class="coupnStateBox" @click="selectCoupon($event, item)">
              <view v-if="(!item.received || (item.repeat_receive !== 1 && item.received < item.repeat_quantity) || item.repeat_quantity === 0) && type === 'goods'" class="coupnState">{{ item.received ? '可领取' : '可领取' }}</view>
              <view v-else-if="type === 'goods'" class="coupnState">已领取</view>
              <view v-if="couponState === 0 && type === 'mine' " class="coupnState" @click="toCoupon(item)">去使用</view>
              <view v-if="couponState === 1 && type === 'mine'" class="coupnState checked">已使用</view>
              <view v-if="couponState === 2 && type === 'mine'" class="coupnState checked">{{ getCouponState(item) }}</view>
              <view v-if="type === 'order'" class="couponChecked">
                <image src="/static/images/icon/coupon_checked.png" />
              </view>
            </view>
            <image v-if="item.received && type === 'goods'" class="signicon" src="/static/images/cart/bg_select_icon.png" />
          </view>
          <view v-if="item.show" class="ruleBox">
            <view v-html="item.rule"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { parseTime } from '@/utils/tools'
import { toFunctionDetail, h5NavigateTo } from '@/utils/navigateTo'
export default {
  name: 'CouponList',
  props: {
    couponList: {
      type: Array,
      default() {
        return []
      }
    },
    type: {
      type: String,
      default() {
        return 'goods'
      }
    },
    couponState: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  data() {
    return {
      showSkuList: true
    }
  },
  computed: {
  },
  async created() {
  },
  methods: {
    showRule(item) {
      // this.$set(item, 'show', !item.show)
      this.$gc.$message({
        title: '温馨提示',
        content: item.rule,
        confirmText: '我知道了',
        showCancel: false,
        align: 'center'
      })
    },
    toCoupon(item) {
      if (item.link_type === 'IN_PAGE') {
        const firstseat = uni.getStorageSync('firstseat')
        toFunctionDetail(item.inpage_data, 'navigateTo', {
          preseat: '我的优惠券',
          firstseat: firstseat || '我的优惠券'
        })
      } else if (item.link_type === 'URL') {
        h5NavigateTo(item.link)
      }
    },
    getCouponState(item) {
      let text = ''
      switch (item.state) {
        case 'COUPON_STATE_INVALID':
          text = '已失效'
          break

        default:
          text = '已过期'
          break
      }
      return text
    },
    selectCoupon(e, item) {
      this.$emit('selectCoupon', item)
    },
    _parseTime(time, parse) {
      return parseTime(time, parse)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .couponContainer{
    min-height: 310px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #f5f5f5;
    .title{
      background-color: #fff;
      font-size: 17px;
      padding: 0px 20px;
      padding-bottom: 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    .coupnItemScroll{
      overflow-y: auto;
      // background-color: #fff;
    }
    .coupnItemBox{
      padding: 32rpx 32rpx;
      .couponNone{
        width: 686rpx;
        min-height: 189rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
      }
      .ruleBox{
        background-color: #fff;
        margin: 0 10px;
        transition: 200ms;
        padding: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }
    }
    .couponItem{
      width: 100%;
      min-height: 189rpx;
      background-image: url('~@/static/images/cart/bg_coupon_normal.png');
      background-size: 100% 100%;
      position: relative;
      // box-shadow: 1px 3px 10px #ccc;
      // background:rgba(255,244,248,1);
      // border:1px solid $color-theme;
      border-radius:10px;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .quota{
        color: #000;
        width: 200rpx;
        display: flex;
        white-space: nowrap;
        word-wrap: none;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
        flex-direction: column;
        .b{font-size:60rpx; font-weight: normal; height: 45px; color: $color-title; display: inline-block}
        .small{font-size: 32rpx; display: inline-block}
        // border-right: 1px dotted #333;
        border-right: 1px dotted #efefef;
      }
      .descripe{
        flex: 1;
        padding: 5px 10px;
        align-items: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100rpx;
        .p{color: $color-title; font-size: 16px; line-height: 32rpx;margin-bottom: 5px;}
        .em{color: $color-tips; font-style: normal; font-size: 10px; line-height: 24rpx; margin-top: 5px; display: flex; align-items: center; }
        .span{font-size: 12px; color: #999; line-height: 24rpx; }
        image{
          width: 10px;
          margin-left: 5px;
        }
      }
      .coupnStateBox{
        min-height: 200rpx;
        display: flex;
        width: 100rpx;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-image: url('~@/static/images/cart/bg_select_normal.png');
        background-size: 100% 100%;
        &.checked{
          background-image: url('~@/static/images/cart/bg_select_none.png');
          color: white;
        }
      }
      .signicon{
        width: 79rpx;
        height: 68rpx;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        transition: 200ms;
      }
      .coupnState{
        position: relative;
        z-index: 2;
        width: 26rpx;
        font-size: 26rpx;
        text-align: center;
        color: white;
      }
    }
    .couponSelected{
      background-color: #E4E4E4;
      // border: 1px solid #E4E4E4;
      *{color: #333}
      .quota{
        border-right: 1px dotted #efefef;
        b{color: #999;}
        span { color: #999}
        small{color: #999;}
      }
      .descripe{
        p{color: #999;}
        span, em{
          color: #999;
        }
      }
      .coupnStateBox{
        background-image: url('~@/static/images/cart/bg_select_none.png');
      }
    }
  }
</style>
